<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类API测试</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .result { background: #f5f5f5; padding: 10px; margin: 10px 0; border-radius: 3px; }
        button { padding: 8px 15px; margin: 5px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; }
        button:hover { background: #0056b3; }
        pre { white-space: pre-wrap; word-wrap: break-word; }
    </style>
</head>
<body>
    <h1>分类API测试页面</h1>
    
    <div class="test-section">
        <h3>1. 测试分类列表API</h3>
        <button onclick="testCategoryList()">获取分类列表</button>
        <div id="categoryListResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>2. 测试分类树API</h3>
        <button onclick="testCategoryTree()">获取分类树</button>
        <div id="categoryTreeResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>3. 测试分类简单列表API</h3>
        <button onclick="testCategorySimple()">获取简单列表</button>
        <div id="categorySimpleResult" class="result"></div>
    </div>
    
    <div class="test-section">
        <h3>4. 测试健康检查API</h3>
        <button onclick="testHealthCheck()">健康检查</button>
        <div id="healthCheckResult" class="result"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/axios@1.5.0/dist/axios.min.js"></script>
    <script>
        // 自动检测后端服务地址
        function getBaseURL() {
            const protocol = window.location.protocol;
            const hostname = window.location.hostname;
            
            // 如果当前页面在8081端口，直接使用当前地址
            if (window.location.port === '8081') {
                return `${protocol}//${hostname}:8081`;
            }
            
            // 否则默认使用8081端口
            return `${protocol}//${hostname}:8081`;
        }
        
        const baseURL = getBaseURL();
        
        console.log('后端服务地址:', baseURL);
        console.log('当前页面地址:', window.location.href);
        
        async function testCategoryList() {
            const resultDiv = document.getElementById('categoryListResult');
            try {
                resultDiv.innerHTML = '正在请求...';
                const response = await axios.get(`${baseURL}/api/categories?pageNum=1&pageSize=5`);
                resultDiv.innerHTML = `
                    <strong>状态:</strong> ${response.status}<br>
                    <strong>响应:</strong><br>
                    <pre>${JSON.stringify(response.data, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <strong>错误:</strong> ${error.message}<br>
                    <strong>详情:</strong><br>
                    <pre>${JSON.stringify(error.response?.data || error, null, 2)}</pre>
                `;
            }
        }
        
        async function testCategoryTree() {
            const resultDiv = document.getElementById('categoryTreeResult');
            try {
                resultDiv.innerHTML = '正在请求...';
                const response = await axios.get(`${baseURL}/api/categories/tree`);
                resultDiv.innerHTML = `
                    <strong>状态:</strong> ${response.status}<br>
                    <strong>响应:</strong><br>
                    <pre>${JSON.stringify(response.data, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <strong>错误:</strong> ${error.message}<br>
                    <strong>详情:</strong><br>
                    <pre>${JSON.stringify(error.response?.data || error, null, 2)}</pre>
                `;
            }
        }
        
        async function testCategorySimple() {
            const resultDiv = document.getElementById('categorySimpleResult');
            try {
                resultDiv.innerHTML = '正在请求...';
                const response = await axios.get(`${baseURL}/api/categories/simple`);
                resultDiv.innerHTML = `
                    <strong>状态:</strong> ${response.status}<br>
                    <strong>响应:</strong><br>
                    <pre>${JSON.stringify(response.data, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <strong>错误:</strong> ${error.message}<br>
                    <strong>详情:</strong><br>
                    <pre>${JSON.stringify(error.response?.data || error, null, 2)}</pre>
                `;
            }
        }
        
        async function testHealthCheck() {
            const resultDiv = document.getElementById('healthCheckResult');
            try {
                resultDiv.innerHTML = '正在请求...';
                const response = await axios.get(`${baseURL}/api/categories/health`);
                resultDiv.innerHTML = `
                    <strong>状态:</strong> ${response.status}<br>
                    <strong>响应:</strong><br>
                    <pre>${JSON.stringify(response.data, null, 2)}</pre>
                `;
            } catch (error) {
                resultDiv.innerHTML = `
                    <strong>错误:</strong> ${error.message}<br>
                    <strong>详情:</strong><br>
                    <pre>${JSON.stringify(error.response?.data || error, null, 2)}</pre>
                `;
            }
        }
    </script>
</body>
</html> 